<template>
  <div class="br-layout-relative" v-if="datasourceFrom">
    <div class="br-layout-relative">
      <div class="br-layout-absolute br-border-bottom" style="height: 40px;line-height: 40px; text-align: right;">
        <span style="float: left;margin-left: 10px;">{{datasourceFrom.displayName}}&nbsp;&nbsp;({{datasourceFrom.typeDesc}})</span>
        <el-button type="primary" style="margin-right: 10px;" size="mini" @click="edit">编辑</el-button>
      </div>
      <div class="br-layout-absolute" style="top: 41px;left: 10px;bottom: 0;right: 10px;">
        <div class="br-form">
          <el-form size="mini" label-width="150px" label-position="left">
            <el-form-item label="主机名称" class="br-form-item">
              <span slot="label" class="br-form-text">主机名称</span>
              <span class="br-text">{{datasourceFrom.hostname}}</span>
            </el-form-item>
            <el-form-item label="端口号" class="br-form-item">
              <span slot="label" class="br-form-text">端口号</span>
              <span class="br-text">{{datasourceFrom.port}}</span>
            </el-form-item>
            <el-form-item label="数据库名称" class="br-form-item">
              <span slot="label" class="br-form-text">数据库名称</span>
              <span class="br-text">{{datasourceFrom.databaseName}}</span>
            </el-form-item>
            <template v-if="datasourceFrom.type==='ORACLE'">
              <el-form-item label="数据表空间" class="br-form-item">
                <span slot="label" class="br-form-text">数据表空间</span>
                <span class="br-text">{{datasourceFrom.dataTablespace}}</span>
              </el-form-item>
              <el-form-item label="索引表空间" class="br-form-item">
                <span slot="label" class="br-form-text">索引表空间</span>
                <span class="br-text">{{datasourceFrom.indexTablespace}}</span>
              </el-form-item>
            </template>
            <el-form-item label="账号" class="br-form-item">
              <span slot="label" class="br-form-text">账号</span>
              <span class="br-text">{{datasourceFrom.username}}</span>
            </el-form-item>
            <el-form-item label="密码" class="br-form-item">
              <span slot="label" class="br-form-text">密码</span>
              <span class="br-text">***********</span>
            </el-form-item>
            <el-form-item label="数据连接URL" class="br-form-item">
              <span slot="label" class="br-form-text">数据连接<span style="font-weight: 600;">URL</span></span>
              <div class="br-text" :title="datasourceFrom.url">{{datasourceFrom.url}}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    components: {},
    props: {},
    computed: {
      ...mapGetters(['connection']),
      datasourceFrom() {
        return this.connection.item;
      }
    },
    data() {
      return {}
    },
    methods: {
      edit() {
        this.$store.commit("CONNECTION_TEMPALTE", 2);
      }
    },
    created() {},
    mounted() {},
  }
</script>

<style lang="less" scoped>
</style>
